<template>
  <div
    class="pa-3 d-flex"
    :class="{ 'flex-row': user.id == 0, 'flex-row-reverse': user.id == 1 }"
  >
    <v-avatar color="primary" size="50"></v-avatar>
    <div class="d-flex flex-column mx-2">
      <div
        class="px-2"
        :class="{
          'align-self-start': user.id == 0,
          'align-self-end': user.id == 1,
        }"
      >
        <span class="primary--text">{{ user.name }}</span
        ><span class="text-caption ml-2 fontblack--text">{{
          user.subtitle
        }}</span>
      </div>
      <v-sheet
        elevation="2"
        :color="user.id == 0 ? 'thirdary' : 'primary'"
        :class="{
          'fontblack--text': user.id == 0,
          'font-white--text': user.id == 1,
        }"
        class="d-inline-flex pa-2 align-center justify-center"
        rounded="lg"
        >{{ user.msg }}</v-sheet
      >
    </div>
  </div>
</template>



<script>
export default {
  props: {
    user: Object,
  },
};
</script>



<style lang="scss" scoped>
</style>
